<template>
  <view class="publish-page">
    <!-- 顶部导航栏 -->
   <!-- <u-navbar 
      title="发布信息" 
      left-arrow 
      @leftClick="navigateBack"
      :border-bottom="false"
    >
      <template #right>
        <view class="save-btn" @click="savePost">
          <text class="save-text">发布</text>
        </view>
      </template>
    </u-navbar> -->
<view class="navbar">
	 <!-- <view class="back-btn" @click="navigateBack">
			<u-icon name="arrow-left" size="40" color="#333"></u-icon>
	</view> -->
      <view class="title"></view> 
      <view class="publish-btn" @click="savePost">
        <text class="publish-text">发布</text>
      </view>
    </view>
    <!-- 信息类型选择 -->
    <view class="post-type">
      <view 
        class="type-item" 
        :class="{ active: postType === 'supply' }"
        @click="setPostType('supply')"
      >
        <text class="type-text">供应</text>
      </view>
      <view 
        class="type-item" 
        :class="{ active: postType === 'demand' }"
        @click="setPostType('demand')"
      >
        <text class="type-text">需求</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <u-form 
      ref="form" 
      :model="postData" 
      :rules="rules" 
      class="post-form"
    >
      <!-- 名称输入 -->
      <u-form-item 
        label="名称" 
        prop="name"
        label-width="140rpx"
      >
        <u-input 
          v-model="postData.name" 
          placeholder="请输入商品或需求名称"
          border="none"
        ></u-input>
      </u-form-item>

      <!-- 类型选择 - 修复后的实现 -->
      <u-form-item 
        label="类型" 
        prop="categoryName"
        label-width="140rpx"
      >
        <view class="picker-container" @click="showCategoryPicker">
          <text v-if="!postData.categoryId" class="picker-placeholder">{{ placeholderText }}</text>
          <text v-else class="picker-value">{{ postData.categoryName }}</text>
          <u-icon name="arrow-down" size="28" color="#c0c4cc" class="picker-icon"></u-icon>
        </view>
      </u-form-item>

      <!-- 数量输入 -->
      <u-form-item 
        label="数量" 
        prop="quantity"
        label-width="140rpx"
      >
        <u-input 
          v-model.number="postData.quantity" 
          type="number"
          placeholder="请输入数量"
          border="none"
        ></u-input>
      </u-form-item>
	  
	  <!-- 单位输入 -->
	  <u-form-item 
	    label="单位" 
	    prop="unit"
	    label-width="140rpx"
	  >
	    <view class="unit-input">
	      <u-input 
	        v-model="postData.unit" 
	        placeholder="请输入单位"
	        border="none"
	      ></u-input>
	    </view>
	  </u-form-item>

      <!-- 价格输入 -->
      <u-form-item 
        label="价格" 
        prop="price"
        label-width="140rpx"
      >
        <view class="price-input">
          <text class="price-symbol">¥</text>
          <u-input 
            v-model.number="postData.price" 
            type="number"
            placeholder="请输入价格"
            border="none"
            class="price-number"
          ></u-input>
        </view>
      </u-form-item>
	  
	  

      <!-- 地区选择 - 仿照类型选择实现 -->
      <u-form-item 
        label="地区" 
        prop="region"
        label-width="140rpx"
      >
        <view class="region-container" @click="showRegionPicker">
          <text v-if="region.length === 0" class="picker-placeholder">请选择地区</text>
          <text v-else class="picker-value">{{ regionDisplayText }}</text>
          <u-icon name="arrow-down" size="28" color="#c0c4cc" class="picker-icon"></u-icon>
        </view>
      </u-form-item>

      <!-- 联系电话 -->
      <u-form-item 
        label="电话" 
        prop="phone"
        label-width="140rpx"
      >
        <u-input 
          v-model="postData.phone" 
          type="number"
          placeholder="请输入联系电话"
          border="none"
        ></u-input>
      </u-form-item>

      <!-- 详情描述 -->
      <u-form-item 
        label="详情" 
        prop="description"
        label-width="140rpx"
        class="form-textarea"
      >
        <u--textarea 
          v-model="postData.description" 
          placeholder="请详细描述供应或需求信息..."
          :count="true"
          maxlength="50"
          :auto-height="true"
          :border="false"
          class="form-textarea-input"
        ></u--textarea>
      </u-form-item>

      <!-- 图片上传 -->
      <u-form-item 
        label="图片" 
        prop="imageArr"
        label-width="140rpx"
      >
        <u-upload
          :fileList="fileList"
          :maxCount="5"
          :action="uploadUrl"
          @afterRead="afterRead"
          @delete="deleteImage"
          name="file"
          multiple
          accept="image"
          :showProgress="true"
          :deletable="true"
          width="160rpx"
          height="160rpx"
          :previewFullImage="true"
        >
        </u-upload>
        <text class="upload-tip">最多上传5张图片，支持jpg、png格式</text>
      </u-form-item>
    </u-form>

    <!-- 分类选择弹窗 -->
    <u-action-sheet
      :show="showCategoryPickerSheet"
      :actions="pickerActions"
      :cancel-text="'取消'"
      @close="showCategoryPickerSheet = false"
      @select="onCategorySelect"
      :safe-area-inset-bottom="true"
      :style="{ maxHeight: '60vh', overflowY: 'auto' }"
    >
      <!-- 自定义内容以支持滚动 -->
      <view class="custom-action-sheet">
        <view 
          v-for="(item, index) in pickerActions" 
          :key="index"
          class="action-item"
          @click="onCustomCategorySelect(item, index)"
        >
          <text class="action-text">{{ item.name }}</text>
        </view>
      </view>
    </u-action-sheet>

    <!-- 地区选择弹窗 -->
    <u-action-sheet
      :show="showRegionPickerSheet"
      :actions="regionPickerActions"
      :cancel-text="'取消'"
      @close="showRegionPickerSheet = false"
      @select="onRegionSelect"
      :safe-area-inset-bottom="true"
      :style="{ maxHeight: '60vh', overflowY: 'auto' }"
    >
      <!-- 自定义内容以支持滚动 -->
      <view class="custom-action-sheet">
        <view 
          v-for="(item, index) in regionPickerActions" 
          :key="index"
          class="action-item"
          @click="onCustomRegionSelect(item, index)"
        >
          <text class="action-text">{{ item.name }}</text>
        </view>
      </view>
    </u-action-sheet>

    <!-- 提交成功弹窗 -->
    <u-modal 
      :show="showSuccess" 
      title="发布成功" 
      :showConfirmButton="true"
      :showCancelButton="true"
      cancelText="继续发布"
      confirmText="查看列表"
      @cancel="continuePosting"
      @confirm="gotoList"
    >
      <view class="popup-content" slot="default">
        <u-icon name="checkmark-circle" size="60" color="#4cd964" class="popup-icon"></u-icon>
        <text class="popup-desc">您的{{ postType === 'supply' ? '供应' : '需求' }}信息已发布</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      // 帖子类型：supply-供应，demand-需求
      postType: 'supply',
      
      // 帖子数据
      postData: {
        name: '',
        categoryId: 1, // 验证字段 - 分类ID
        categoryName: '', // 显示字段
        quantity: null,
        price: null,
        unit: '', // 添加单位字段
        region: '',
        phone: '',
        description: '',
        imageArr: [] ,// 存储上传后的图片URL
		images:'',
		userId:'',
      },
      
      // 分类数据
      categories: [],
      categoryIndex: 0,
      showCategoryPickerSheet: false, // 控制分类选择器显示
      placeholderText: '请选择类型',
      
      // 地区数据
      region: [],
      showRegionPickerSheet: false, // 控制地区选择器显示
      regionPickerActions: [], // 地区选择器选项
      rawRegionData: [], // 原始地区数据
      currentProvince: null, // 当前选中的省份
      
      // 为u-action-sheet准备的数据
      pickerActions: [],
      
      // 文件列表（用于上传组件）
      fileList: [],
      
      // 弹窗状态
      showSuccess: false,
      
      // 上传地址
      uploadUrl: this.$config.baseUrl + 'api/v1/upload/image',
      
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        categoryName: [
          { required: true, message: '请选择类型', trigger: ['blur', 'change'] }
        ],
        quantity: [
          { required: true, message: '请输入数量', trigger: ['blur', 'change'] },
          { 
            validator: (rule, value, callback) => {
              return !isNaN(parseFloat(value)) && isFinite(value) && parseFloat(value) > 0;
            }, 
            message: '数量必须为大于0的数字', 
            trigger: ['blur', 'change'] 
          }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: ['blur', 'change'] },
          { 
            validator: (rule, value, callback) => {
              return !isNaN(parseFloat(value)) && isFinite(value) && parseFloat(value) >= 0;
            }, 
            message: '价格必须为大于等于0的数字', 
            trigger: ['blur', 'change'] 
          }
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: ['blur', 'change'] }
        ],
        region: [
          { required: true, message: '请选择地区', trigger: ['change'] }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
        ],
        description: [
          { required: true, message: '请输入详情描述', trigger: ['blur', 'change'] },
          { max: 500, message: '描述不能超过500字', trigger: ['blur', 'change'] }
        ]
      }
    };
  },
  
  computed: {
	...mapState(['userInfo', "appProperties"]),

    // 计算地区显示文本
    regionDisplayText() {
      if (this.region && this.region.length > 0) {
        return this.region.join('-');
      }
      return '';
    }
  },
  
  created() {
	// 初始化分类数据
	this.getCategory();  
    // 初始化地区数据
    this.initRegionData();
  },
  onShow() {
  	this.loadUserInfo()
  },
  methods: {
    // 初始化地区数据
    initRegionData() {
      // 从API获取实际的地区数据
      this.getRegionData();
    },
    
    // 获取地区数据
    async getRegionData() {
      try {
        // 调用Spring Boot后端API
        const result = await this.$request("api/v1/regionList", "get");
        if (result.code === 200) {
          // 保存原始数据
          this.rawRegionData = result.data || [];
          // 更新省份选择器选项
          this.updateProvincePickerActions();
        } else {
          // 如果API失败，使用默认数据
          this.rawRegionData = [
            {
              id: 1,
              name: '北京市',
              children: [
                { id: 101, name: '东城区', parentId: 1 },
                { id: 102, name: '西城区', parentId: 1 },
                { id: 103, name: '朝阳区', parentId: 1 }
              ]
            },
            {
              id: 2,
              name: '上海市',
              children: [
                { id: 201, name: '黄浦区', parentId: 2 },
                { id: 202, name: '徐汇区', parentId: 2 }
              ]
            }
          ];
          this.updateProvincePickerActions();
        }
      } catch (error) {
        console.error('获取地区数据失败:', error);
        // API失败时使用默认数据
        this.rawRegionData = [
          {
            id: 1,
            name: '北京市',
            children: [
              { id: 101, name: '东城区', parentId: 1 },
              { id: 102, name: '西城区', parentId: 1 },
              { id: 103, name: '朝阳区', parentId: 1 }
            ]
          },
          {
            id: 2,
            name: '上海市',
            children: [
              { id: 201, name: '黄浦区', parentId: 2 },
              { id: 202, name: '徐汇区', parentId: 2 }
            ]
          }
        ];
        this.updateProvincePickerActions();
      }
    },
    
    // 更新省份选择器选项
    updateProvincePickerActions() {
      if (this.rawRegionData && this.rawRegionData.length > 0) {
        this.regionPickerActions = this.rawRegionData.map(province => ({
          name: province.name
        }));
      } else {
        this.regionPickerActions = [];
      }
      // 添加取消选项
      this.regionPickerActions.push({ name: '取消', color: '#999' });
    },
    
    // 显示地区选择器
    showRegionPicker() {
      if (this.currentProvince) {
        // 如果已选择省份，显示其城市列表
        this.updateCityPickerActions();
      } else {
        // 否则显示省份列表
        this.updateProvincePickerActions();
      }
      this.showRegionPickerSheet = true;
    },
    
    // 更新城市选择器选项
    updateCityPickerActions() {
      if (this.currentProvince && this.currentProvince.children) {
        this.regionPickerActions = this.currentProvince.children.map(city => ({
          name: city.name
        }));
      } else {
        this.regionPickerActions = [];
      }
      // 添加返回省份选项和取消选项
      this.regionPickerActions.unshift({ name: '← 返回省份', color: '#1677FF' });
      // this.regionPickerActions.push({ name: '取消', color: '#999' });
    },
    
    // 自定义地区选择（支持省份/城市选择）
    onCustomRegionSelect(item, index) {
      // 避免选择"取消"选项
      if (item.name === '取消') {
        this.showRegionPickerSheet = false;
        return;
      }
      
      // 处理返回省份选项
      if (item.name === '← 返回省份') {
        this.currentProvince = null;
        this.updateProvincePickerActions();
        return;
      }
      
      // 如果当前没有选中省份，表示正在选择省份
      if (!this.currentProvince) {
        // 查找选中的省份
        const selectedProvince = this.rawRegionData.find(province => 
          province.name === item.name
        );
        
        if (selectedProvince) {
          this.currentProvince = selectedProvince;
          // 显示该省份的城市列表
          this.updateCityPickerActions();
        }
      } else {
        // 如果已选择省份，表示正在选择城市
        const selectedCity = this.currentProvince.children.find(city => 
          city.name === item.name
        );
        
        if (selectedCity) {
          this.region = [this.currentProvince.name, selectedCity.name];
          this.postData.region = this.currentProvince.name+"-"+selectedCity.name;
        }
        this.showRegionPickerSheet = false;
        this.currentProvince = null; // 重置省份状态
      }
    },
    
    // 地区选择（保留原方法用于兼容）
    onRegionSelect(e) {
      this.onCustomRegionSelect(e, 0); // 复用新方法
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 设置帖子类型
    setPostType(type) {
      if (this.postType !== type) {
        this.postType = type;
        // 重置表单验证状态
        this.$nextTick(() => {
          if (this.$refs.form) {
            this.$refs.form.clearValidate(['categoryName']);
          }
        });
      }
    },
    
    // 显示分类选择器
    showCategoryPicker() {
      // 确保在显示选择器前更新选项
      this.updatePickerActions();
      this.showCategoryPickerSheet = true;
    },
    
    // 更新选择器选项
    updatePickerActions() {
      // 确保categories有数据
      if (this.categories && this.categories.length > 0) {
        this.pickerActions = this.categories.map(category => ({
          name: category.name || category
        }));
      } else {
        this.pickerActions = [];
      }
      // 添加取消选项
      this.pickerActions.push({ name: '取消', color: '#999' });
    },
    
    // 自定义分类选择（支持滚动）
    onCustomCategorySelect(item, index) {
      // 避免选择"取消"选项
      if (item.name === '取消') {
        this.showCategoryPickerSheet = false;
        return;
      }
      
      // 查找选中的分类
      const selectedCategory = this.categories.find(category => 
        (category.name || category) === item.name
      );
      
      if (selectedCategory) {
        const catIndex = this.categories.findIndex(category => 
          (category.name || category) === item.name
        );
        this.categoryIndex = catIndex;
        this.postData.categoryName = selectedCategory.name || selectedCategory;
        this.postData.categoryId = selectedCategory.id; // ✅ 修复：同时设置验证字段
      }
      this.showCategoryPickerSheet = false;
    },
    
    // 分类选择（保留原方法用于兼容）
    onCategorySelect(e) {
      this.onCustomCategorySelect(e, 0); // 复用新方法
    },
    
    // 图片上传处理
    async afterRead(files) {
      // 处理多个文件上传
      const uploadPromises = [];
      
      // 如果是单个文件，转换为数组
      const fileList = Array.isArray(files.file) ? files.file : [files.file];
      
      for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        
        // 检查文件大小（限制为5MB）
        if (file.size > 5 * 1024 * 1024) {
          uni.showToast({
            title: '图片大小不能超过5MB',
            icon: 'none'
          });
          continue;
        }
        
        // 创建上传Promise
        const uploadPromise = new Promise((resolve, reject) => {
          uni.uploadFile({
            url: this.uploadUrl,
            filePath: file.url || file.path,
            name: 'file',
			header: {
			          'token': `${ this.$store.getters.getToken}` // 添加token到请求头
			        },
            formData: {
              user: 'test'
            },
            success: (res) => {
              try {
                const result = JSON.parse(res.data);
                if (result.code === 200) {
                  // 将服务器返回的图片URL添加到列表
                  this.fileList.push({
                    url: result.msg,
                    id: Date.now() + Math.random() // 添加唯一ID
                  });
                  resolve(result.msg);
                } else {
                  uni.showToast({
                    title: '图片上传失败',
                    icon: 'none'
                  });
                  reject(new Error('Upload failed'));
                }
              } catch (e) {
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
                reject(e);
              }
            },
            fail: (err) => {
              uni.showToast({
                title: '图片上传失败',
                icon: 'none'
              });
              reject(err);
            }
          });
        });
        
        uploadPromises.push(uploadPromise);
      }
      
      // 等待所有上传完成
      try {
        await Promise.all(uploadPromises);
        // 更新postData中的imageArr
        this.updatePostDataImages();
      } catch (error) {
        console.error('图片上传过程中出现错误:', error);
      }
    },
    
    // 删除图片
    deleteImage(event) {
	  const deleteFileName = this.fileList[event.index].url.split('/').pop();
	  this.$request(`api/v1/deleteFile/${deleteFileName}`, "delete").then(result => {
	  	// 显示保存成功提示
	  	if (result.code === 200) {
			this.fileList.splice(event.index, 1);
			this.updatePostDataImages();
	  	}else{
			uni.showToast({
			  title: '图片删除失败',
			  icon: 'none'
			});
		}
	  }).catch(err => {
        console.error('图片删除失败:', err);
      });  
      
    },
    
    // 更新postData中的imageArr数组
    updatePostDataImages() {
      this.postData.imageArr = this.fileList.map(item => item.url);
    },
    // 加载用户信息
    loadUserInfo() {
      // 实际项目中应该从接口或本地存储获取
      if (this.userInfo) {
        this.postData.userId = this.userInfo.appUserId || '';
    
      }
    },
    // 保存帖子
    savePost() {
      // 验证表单
	  var that = this
	  if(this.postData.imageArr&&this.postData.imageArr.length>0){
		  this.postData.images = this.postData.imageArr.join(';')
	  }
	  
	  
      this.$refs.form.validate().then(valid => {
        if (valid) {
			that.postData.type = that.postType
			that.$request('api/v1/supplyDemand/publish', 'post',that.postData).then(result => {
				if(result.code==200){
					that.showSuccess = true;
				}
			});
          // // 表单验证通过，提交数据
          // console.log('提交的帖子数据：', {
          //   type: this.postType,
          //   ...this.postData,
          //   publishTime: new Date().toISOString()
          // });
          
          // 模拟提交成功
          // setTimeout(() => {
          //   this.showSuccess = true;
          // }, 1000);
        }
      }).catch(err => {
        console.log('表单验证失败：', err);
        // 显示第一个验证错误
        if (err && err.length > 0) {
          const firstError = err[0];
          uni.showToast({
            title: firstError.message || '表单验证失败',
            icon: 'none'
          });
        }
      });
    },
	
	getCategory() {
		this.$request("api/v1/classList", "get").then(result => {
			// 显示保存成功提示
			if (result.code === 200) {
					let categories = Array.isArray(result.data) ? result.data : [];
					this.categories = categories;
					// 更新选择器选项
					this.updatePickerActions();
			} else {
					const saved = uni.getStorageSync('newsCategorySettings');
					this.categories = saved || [];
					// 更新选择器选项
					this.updatePickerActions();
				}
		}).catch(err => {
      console.error('获取分类数据失败:', err);
      // API失败时使用默认数据
      this.categories = [
        {id: 1, name: 'UHMWPE纤维'},
        {id: 2, name: '农产品'},
        {id: 3, name: '电子产品'},
        {id: 4, name: '家居用品'},
        {id: 5, name: '服装服饰'},
        {id: 6, name: '办公用品'},
        {id: 7, name: '机械设备'},
        {id: 8, name: '原材料'},
        {id: 9, name: '其他'},
        {id: 10, name: '建筑材料'},
        {id: 11, name: '化工产品'},
        {id: 12, name: '食品饮料'},
        {id: 13, name: '医疗器械'},
        {id: 14, name: '汽车配件'},
        {id: 15, name: '纺织品'},
        {id: 16, name: '工艺品'},
        {id: 17, name: '体育用品'},
        {id: 18, name: '图书音像'},
        {id: 19, name: '珠宝首饰'},
        {id: 20, name: '家具家电'}
      ];
      // 更新选择器选项
      this.updatePickerActions();
    });
	},
    
    // 继续发布
    continuePosting() {
      this.showSuccess = false;
      // 重置表单
      this.$refs.form.resetFields();
      this.postData = {
        name: '',
        categoryId: '', // 重置验证字段
        categoryName: '', // 重置显示字段
        quantity: null,
        price: null,
        unit: '', // 重置单位
        region: '',
        phone: '',
        description: '',
        imageArr: [],
		images:'',
		type:'supply',
      };
      this.fileList = [];
      this.region = []; // 重置地区
      this.categoryIndex = 0;
      this.currentProvince = null; // 重置省份状态
      this.regionPickerActions = []; // 重置地区选择器选项
      this.rawRegionData = []; // 重置原始数据
      this.postType = 'supply'; // 重置为默认类型
      
      // 重新初始化地区数据
      this.initRegionData();
    },
    
    // 前往列表页
    gotoList() {
      this.showSuccess = false;
      // 这里可以跳转到列表页
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.publish-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  // padding-top: calc(88rpx + constant(safe-area-inset-top)); /* 兼容刘海屏 */
  // padding-top: calc(88rpx + env(safe-area-inset-top));
}

// 导航栏样式
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #2F85FC;
  color: #fff;

  .title {
    font-size: 36rpx;
    font-weight: 500;
    flex: 1;
    text-align: center;
  }

  .publish-btn {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #1677FF;
    padding: 8rpx 20rpx;
    border-radius: 20rpx;

    .publish-text {
      font-size: 26rpx;
      font-weight: 500;
      margin-left: 5rpx;
    }
  }
}

// 导航栏右侧按钮
.save-btn {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .save-text {
    font-size: 30rpx;
    color: #1677FF;
    font-weight: 500;
  }
}

// 帖子类型选择
// 帖子类型选择
.post-type {
  display: flex;
  background-color: #FFF;
  border-bottom: 1px solid #eee;
  height: 90rpx; // 明确高度
  line-height: 90rpx; // 垂直居中
  box-sizing: border-box;

  .type-item {
    flex: 1;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 30rpx;
    color: #666;
    transition: all 0.3s ease;

    .type-text {
      font-size: 30rpx;
      color: #666;
    }

    &.active {
      .type-text {
        color: #1677FF;
        font-weight: 500;
      }

      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4rpx;
        background-color: #1677FF;
      }
    }

    &:active {
      background-color: #f5f5f5;
    }
  }
}

// 表单样式
.post-form {
  padding: 20rpx 30rpx;
}

// 重写u-form-item样式
::v-deep .u-form-item {
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  padding: 25rpx 30rpx;
}

// 价格输入特殊样式
.price-input {
  width: 100%;
  display: flex;
  align-items: center;

  .price-symbol {
    font-size: 28rpx;
    color: #333;
    margin-right: 10rpx;
  }

  .price-number {
    flex: 1;
  }
}

// 选择器容器样式
.picker-container, .region-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10rpx 0;
  
  .picker-value {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }
  
  .picker-placeholder {
    font-size: 28rpx;
    color: #c0c4cc;
    flex: 1;
  }
  
  .picker-icon {
    margin-left: 20rpx;
  }
}

// 文本域样式
.form-textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  ::v-deep .u-textarea {
    width: 100%;
    min-height: 200rpx;
    margin-top: 5rpx;
    background-color: #f8f8f8;
    padding: 20rpx;
    border-radius: 8rpx;
  }

  .textarea-count {
    align-self: flex-end;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
    display: block;
  }
}

// 图片上传样式
::v-deep .u-upload {
  margin-top: 10rpx;
}

::v-deep .u-upload__files {
  flex-wrap: wrap;
  gap: 20rpx;
}

::v-deep .u-upload__file {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.add-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  border: 1px dashed #ddd;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 15rpx;
  display: block;
}

// 弹窗内容样式
.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  .popup-icon {
    margin-bottom: 30rpx;
  }

  .popup-desc {
    font-size: 28rpx;
    color: #666;
    text-align: center;
  }
}

// 自定义分类选择弹窗样式
.custom-action-sheet {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20rpx 0;
}

.action-item {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
  &:active {
    background-color: #f5f5f5;
  }
}

.action-text {
  font-size: 30rpx;
  color: #333;
  display: block;
}
</style>



